<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>早安、晚安动画</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="container-wrapper">
  <h1>Good Morning, Goodnight</h1>
  <p id="subtitle">Click on the sun or moon for animation</p>
  <div class="container">
    <div class="circle-container">
      <!-- 天空部分 -->
      <div class="sky">
        <div class="sky-night">
          <div class="stars">
            <div class="shooting-star"></div>
            <div class="star-group-1"></div>
            <div class="star-group-2"></div>
            <div class="star-group-3"></div>
            <div class="star-group-4"></div>
          </div>
        </div>

        <!-- 云彩 -->
        <div class="cloud cloud-1"></div>
        <div class="cloud cloud-2"></div>
        <div class="cloud cloud-3"></div>
        <div class="cloud cloud-4"></div>
        <div class="cloud cloud-5"></div>
        <div class="cloud cloud-6"></div>
        <div class="bird bird-1"></div>
        <div class="bird bird-2"></div>
        <div class="bird bird-3"></div>
      </div>

      <!-- 山川 -->
      <div class="mountains">
        <div class="mountain-back">
          <div class="mountain-back-1"></div>
          <div class="mountain-back-2"></div>
        </div>
        <div class="mountain-middle">
          <div class="mountain-middle-1"></div>
          <div class="mountain-middle-2"></div>
        </div>
        <div class="mountain-top">
          <div class="mountain-top-1"></div>
        </div>
      </div>

      <!-- 太阳 -->
      <div class="sun-container">
        <div class="sun"></div>
      </div>

      <!-- 海洋 -->
      <div class="ocean">
        <div class="boat"></div>
        <div class="ocean-night">
          <div class="moon"></div>

          <!-- 山川 -->
          <div class="mountains mountains-bottom">
            <div class="mountain-back">
              <div class="mountain-back-1"></div>
              <div class="mountain-back-2"></div>
            </div>
            <div class="mountain-middle">
              <div class="mountain-middle-1"></div>
              <div class="mountain-middle-2"></div>
            </div>
            <div class="mountain-top">
              <div class="mountain-top-1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <p>灵感来源 Nanou | <a href="https://dribbble.com/Nanuo" target="_blank">Dribbble</a>, <a href="https://www.behance.net/Nanuo" target="_blank">Behance</a>, <a href="https://www.instagram.com/nanuonanuo/" target="_blank">Instagram</a> <br><br>动画设计 <a href="https://lavender-z.github.io/" target="_blank">橘子</a></p>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><script src="./script.js"></script>
</body>
</html>